<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的收藏 - 宠物图鉴</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; color: #2980b9; }
        img { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; }
        .filter { margin-bottom: 20px; }
        .pagination { margin-top: 20px; text-align: center; }
        .pagination a { display: inline-block; padding: 8px 16px; margin: 0 4px; background-color: white; border-radius: 4px; text-decoration: none; color: #2980b9; }
        .pagination a:hover, .pagination a.active { background-color: #2980b9; color: white; }
        
        .btn {
            padding: 6px 12px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
        }
        .btn:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的收藏</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <!-- 收藏统计 -->
        <div class="card">
            <h2>收藏概览</h2>
            <p>您当前共收藏了 <strong>${pets.size()}</strong> 只宠物</p>
        </div>
        
        <!-- 收藏列表 -->
        <div class="card">
            <h2>我的收藏宠物</h2>
            <table>
                <tr>
                    <th>编号</th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>属性</th>
                    <th>操作</th>
                </tr>
                <c:choose>
                    <c:when test="${not empty pets}">
                        <c:forEach items="${pets}" var="pet">
                            <tr>
                                <td>${pet.number}</td>
                                <td><img src="${pageContext.request.contextPath}${pet.image}" alt="${pet.name}" /></td>
                                <td>${pet.name}</td>
                                <td>${pet.attribute}</td>
                                <td>
                                    <a href="petDetail?number=${pet.number}">查看详情</a>

                                    </form>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <tr>
                            <td colspan="5" style="text-align: center; padding: 20px;">
                                <p>您还没有收藏任何宠物</p>
                                <a href="petList" style="color: #3498db; text-decoration: underline;">去宠物图鉴收藏吧</a>
                            </td>
                        </tr>
                    </c:otherwise>
                </c:choose>
            </table>
        </div>
        
        <div class="pagination">
            <a href="#">上一页</a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">下一页</a>
        </div>
    </div>
    
</body>
</html>